<!--  -->
<template>
  <div class="goods-list">
    <!-- 头部 -->
    <van-nav-bar title="商品列表" fixed :z-index="100" @click-left="onBack">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#fff" />
      </template>
    </van-nav-bar>
    <div class="search-box" @click="toSearch">
      <div class="search-main">搜索</div>
    </div>
    <div class="tabs">
      <van-tabs v-model="activeTab" animated>
        <van-tab title="综合">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onReachBottom"
          >
            <van-cell
              v-for="item in synthesisList"
              :key="item.goods_id"
              class="good-item"
              @click="toGoodDetail(item.goods_id)"
            >
              <div class="avatar">
                <img
                  :src="item.goods_small_logo || '/favicon.ico'"
                  alt="此商品暂无图片"
                />
              </div>
              <div class="info">
                <div class="name">{{ item.goods_name }}</div>
                <div class="des">
                  <div class="price">￥ {{ item.goods_price }}</div>
                  <div class="count">
                    库存还剩：{{ item.goods_number || 0 }}
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="销量">
          <van-list finished-text="没有更多了">
            <van-cell
              v-for="(item, index) in sellList"
              :key="index"
              :title="item"
            />
          </van-list>
        </van-tab>
        <van-tab title="价格">
          <van-list finished-text="没有更多了">
            <van-cell
              v-for="(item, index) in priceList"
              :key="index"
              :title="item"
            />
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, List, Tab, Tabs, Cell } from "vant";
import { getGoodsList } from "@/network/front/api";
export default {
  data() {
    return {
      activeTab: 0,
      synthesisList: [],
      sellList: [],
      priceList: [],
      pagenum: 0,
      loading: false,
      finished: false,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    for (let i = 0; i < 20; i++) {
      this.sellList.push("暂无数据接口");
      this.priceList.push("暂无数据接口");
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  computed: {
    type() {
      return this.$route.query.type;
    },
    cat_id() {
      return this.$route.query.cat_id;
    },
  },
  methods: {
    //返回上一页
    onBack() {
      this.$router.back();
    },
    // 去搜索页面
    toSearch() {
      this.$router.push({ name: "Search" });
    },
    //拉取商品列表数据
    async getGoodsListData() {
      console.log("拉取商品列表数据");
      this.loading = true;
      this.pagenum++;
      let res = await getGoodsList({
        url: "/goods/search",
        params: {
          query: this.type,
          pagenum: this.pagenum,
          pagesize: 10,
        },
      });
      if (res.message.goods.length) {
        this.synthesisList.push(...res.message.goods);
        this.loading = false;
      } else {
        this.finished = true;
      }
    },
    //页面触底
    onReachBottom() {
      this.getGoodsListData();
    },
    //点击去商品详情页
    toGoodDetail(id){
      this.$router.push({name:'Detail',params:{id}});
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.goods-list {
  padding-top: 46px;
}
.goods-list >>> .van-nav-bar__content {
  background-color: #ff734c;
}
.goods-list >>> .van-nav-bar__title {
  color: #fff;
}
.goods-list .search-box {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 46px;
  width: 100%;
  height: 44px;
  background-color: #ff734c;
}
.goods-list .search-box .search-main {
  width: 90%;
  height: 34px;
  margin: 5px auto;
  text-align: center;
  line-height: 34px;
  border-radius: 20px;
  background-color: #fff;
}
.tabs {
  position: absolute;
  left: 0;
  top: 90px;
  width: 100%;
}
.goods-list >>> .van-cell {
  padding: 0 !important;
  color: #f00;
  text-align: center;
}
.good-item >>> .van-cell__value {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ff734c;
}
.good-item .avatar img {
  width: 100px;
  margin: 0 10px;
}
.good-item .info {
  flex: 1;
}
.good-item .info .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: bold;
  font-size: 16px;
}
.good-item .info .des {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
  margin-top: 6px;
  font-size: 18px;
}
.good-item .info .des .price {
  color: #f00;
  font-weight: bold;
}
.good-item .info .des .count {
  font-size: 16px;
  color: rgb(67, 196, 42);
}
</style>